<script setup>
import {ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount} from 'vue'
import ChatBoxProcessCard from "@/views/chat/chatBox/ChatBoxProcessCard.vue";

const props = defineProps({
    process: {
        type: Array,
        default() {
            return []
        }
    }
})
// process的字段
// type:logger/nodeOutput/nodeInput
// groupId:
// groupName
// data
// parentId
// process是流式输出过来的。消息有入参提示、日志、错误信息、节点最终输出等
// 还要考虑子流程调用的，嵌套

const emit = defineEmits({})

const processGroup = reactive([])
let watchCanceler = null
const visible = ref(false)
const latestedgroupName = ref('')

const showDialog = () => {
    visible.value = true
}

const formatProcessList = () => {
    processGroup.splice(0)
    let nodeInfo = {}
    props.process.forEach((item) => {
        if (item.parentId && item.parentId === nodeInfo.parentId) {
            // 子流程
            // !nodeInfo.children && (nodeInfo.children=[])
            // nodeInfo.children.push(item)

        } else if (nodeInfo.groupId && nodeInfo.groupId === item.groupId) {
            nodeInfo.groupId = item.groupId
            nodeInfo.status = 'process'
            nodeInfo.data.push({type: item.type, data: item.data})

        } else if (nodeInfo.groupId && nodeInfo.groupId !== item.groupId) {
            processGroup.push(nodeInfo)
            nodeInfo = {groupId: item.groupId, groupName: item.groupName, data: [], status: 'loading'}
        } else {
            nodeInfo = {groupId: item.groupId, groupName: item.groupName, data: [], status: 'loading'}
        }
    })
    if (nodeInfo.groupId) {
        processGroup.push(nodeInfo)
    }
    if (processGroup.length > 0) {
        latestedgroupName.value = processGroup.slice(-1)[0].groupName
    }
}

//#region 生命周期
onBeforeMount(() => {
    formatProcessList()
    watchCanceler = watch(() => props.process.length, () => {
        formatProcessList()
    })
})
onBeforeUnmount(() => {
    watchCanceler && watchCanceler()
})
//#endregion
</script>

<template>

    <div class="chat-box-process">
        <div class="chat-box-process-smartview" @click="showDialog">
            当前运行节点：{{ latestedgroupName }}
        </div>
    </div>

    <el-dialog v-model="visible" :modal="false" title="流程运行日志">
        <div class="dialogBoxProcess">
            <template v-for="(item, index) in processGroup">
                <chat-box-process-card :group-info="item" style="margin-bottom:20px"></chat-box-process-card>
            </template>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="()=>{visible = false}">
                    关闭
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
.dialogBoxProcess {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.chat-box-process {
    position: relative;
    margin-top: 0px;
    &-smartview{
        padding: 8px 10px;
        border: 1px solid rgba(204, 204, 204, 0.41);
        background-color: #f1f2f6;
        color: rgba( 0, 184, 62,1);
        border-radius: 5px;
        font-size: 12px;
        cursor: pointer;
    }
}
</style>